import React, {useEffect, useState} from "react";
import {Avatar, Button, Card, Divider, Dropdown, Icon, List, Menu, message, Modal, Tooltip, Upload,FormOutlined} from "antd";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import api from '@/services'
import styles from './index.less';
import {getAccessToken} from '@/utils/authority';
import {EditOutlined, ExclamationCircleOutlined, EyeOutlined, SwitcherOutlined} from "@ant-design/icons";
import AutoHide from "@/pages/analysis/components/Hide/autoHide";
import encodeQueryParam from "@/utils/encodeParam";
import TreeLine from "@/components/TreeLine";
import {downloadObject} from '@/utils/utils';
import {CategoryItem} from "@/pages/data-screen/category/data";

const {confirm} = Modal;

interface Props {
  location: Location,
  
}

export const TenantContext = React.createContext({});

const Screen = (props: Props) => {

  const [categoryList, setCategoryList] = useState([]);
  const [dataList, setDataList] = useState({
    data: [],
    pageIndex: 0,
    total: 0,
    pageSize: 0
  });
  const [id, setId] = useState('');
  const [url, setUrl] = useState('');
  const [saveVisible, setSaveVisible] = useState(false);
  const [editVisible, setEditVisible] = useState(false);
  const [copyVisible, setCopyVisible] = useState(false);
  const [param, setParam] = useState({});
  const [searchParam, setSearchParam] = useState({pageSize: 12, pageIndex: 0, terms: {type: 'big_screen'}});
  const token = getAccessToken();
  const [organizationList, setOrganizationList] = useState([]);
  const [treeList, setTreeList] = useState([]);


  const handleSearch = (params: any) => {
    setSearchParam(params);
    api.screen.query(encodeQueryParam(params)).then(res => {
      if (res.status === 200) {
        setDataList(res.result)
      }
    })
  };

  let getView = (view: any) => {
    let children = [];
    if (view.children && view.children.length > 0) {
      children = view.children.map((i: any) => {
        return getView(i)
      });
      return {
        id: view.id,
        children: children,
        pId: view.parentId,
        value: view.id,
        title: view.name
      }
    } else {
      return {
        id: view.id,
        pId: view.parentId,
        value: view.id,
        title: view.name
      }
    }
  };
  useEffect(() => {
    let treeList = [
      // {
      //   "children": [
      //     {
      //       "key": "mqtt_dev_02",
      //       "title": "mqtt_dev_02",
      //       "parentkey": "test_01",
      //       "type": "device"
      //     },
      //     {
      //       "key": "mqtt_dev_01",
      //       "title": "mqtt_dev_01",
      //       "parentkey": "test_01",
      //       "type": "device"
      //     },
      //     {
      //       "key": "mqtt_001",
      //       "title": "mqtt_001",
      //       "parentkey": "test_01",
      //       "type": "device"
      //     },
      //     {
      //       "children": [
      //         {
      //           "key": "mqtt_dev_02",
      //           "title": "mqtt_dev_02",
      //           "parentkey": "trdu",
      //           "type": "device"
      //         },
      //         {
      //           "key": "mqtt_dev_01",
      //           "title": "mqtt_dev_01",
      //           "parentkey": "trdu",
      //           "type": "device"
      //         },
      //         {
      //           "key": "mqtt_001",
      //           "title": "mqtt_001",
      //           "parentkey": "trdu",
      //           "type": "device"
      //         },
      //         {
      //           "children": [
      //             {
      //               "key": "mqtt_dev_01",
      //               "title": "mqtt_dev_01",
      //               "parentkey": "1524584771030843392",
      //               "type": "device"
      //             },
      //             {
      //               "key": "mqtt_001",
      //               "title": "mqtt_001",
      //               "parentkey": "1524584771030843392",
      //               "type": "device"
      //             }
      //           ],
      //           "key": "1524584771030843392",
      //           "title": "hcyj5678",
      //           "parentkey": "trdu",
      //           "type": "org"
      //         }
      //       ],
      //       "key": "trdu",
      //       "title": "hcyj",
      //       "parentkey": "test_01",
      //       "type": "org"
      //     }
      //   ],
      //   "key": "test_01",
      //   "title": "test_01",
      //   "type": "org"
      // }
      [
        {
          title: 'parent 1',
          key: '0-0',
          children: [
            {
              title: 'parent 1-0',
              key: '0-0-0',
              children: [
                { title: 'leaf', key: '0-0-0-0' },
                {
                  title: (
                    <>
                      <div>multiple line title</div>
                      <div>multiple line title</div>
                    </>
                  ),
                  key: '0-0-0-1',
                },
                { title: 'leaf', key: '0-0-0-2' },
              ],
            },
            {
              title: 'parent 1-1',
              key: '0-0-1',
              children: [{ title: 'leaf', key: '0-0-1-0'}],
            },
            {
              title: 'parent 1-2',
              key: '0-0-2',
              children: [
                { title: 'leaf', key: '0-0-2-0'},
                {
                  title: 'leaf',
                  key: '0-0-2-1'
                },
              ],
            },
          ],
        },
        {
          title: 'parent 2',
          key: '0-1',
          children: [
            {
              title: 'parent 2-0',
              key: '0-1-0',
              children: [
                { title: 'leaf', key: '0-1-0-0'  },
                { title: 'leaf', key: '0-1-0-1'  },
              ],
            },
          ],
        },
      ]
    ]
    setTreeList(treeList)
    handleSearch(searchParam);
  }, []);
  const findCategory = (id:string)=>{

    const category: Partial<CategoryItem> =
      categoryList.find((i:any) => i.id === id) || {};

    return category.name;
  };

  return (
    <div className={styles.header}>
      <div className={styles.bodyClass}>
        {/* 左边树形菜单 */}
        <TreeLine formItems = {treeList}>

        </TreeLine>

      </div>
    </div>
  )
};

export default Screen;
